<div class="wrapper wrapper-full-page">
  <app-nav></app-nav>
  <div class="full-page register-page">
    <div class="content">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <div class="card card-signup">
              <h2 class="card-title text-center">Register</h2>
              <div class="row">
                <div class="col-md-12">
                  <div class="social text-center">
                    <button class="btn btn-just-icon btn-round btn-weixin">
                      <i class="fa fa-weixin"></i>
                    </button>
                    <button class="btn btn-just-icon btn-round btn-qq">
                      <i class="fa fa-qq"></i>
                    </button>
                    <button class="btn btn-just-icon btn-round btn-weibo">
                      <i class="fa fa-weibo"></i>
                    </button>
                  </div>
                  <div class="card-header text-center">
                    <p>or be classical</p>
                  </div>
                  <form [formGroup]="registerForm" (ngSubmit)="register()">
                    <div class="card-content">
                      <div class="input-group">
                  <span class="input-group-addon">
                    <i class="icon fa fa-user-o"></i>
                  </span>
                        <div class="form-group label-floating" [ngClass]="{'is-focused': usernameInputFocus, 'is-empty': !username.value, 'has-danger': setClassUsername()}">
                          <label class="control-label">账号/邮箱/手机号码</label>
                          <input title="type username here" class="form-control" (focus)="setUsernameInputFocus()"  (blur)="setUsernameInputBlur()" type="text" formControlName="username" #username maxlength="20" />
                        </div>
                      </div>
                      <div class="input-group">
                  <span class="input-group-addon">
                    <i class="icon fa fa-lock"></i>
                  </span>
                        <div class="form-group label-floating is-empty" [ngClass]="{'is-focused': passwordInputFocus, 'is-empty': !password.value, 'has-danger': setClassPassword()}">
                          <label class="control-label">密码</label>
                          <input title="type password here" class="form-control" (focus)="setPasswordInputFocus()"  (blur)="setPasswordInputBlur()" type="password" formControlName="password" #password maxlength="20" />
                        </div>
                      </div>
                    </div>
                    <div class="footer text-center">
                      <button class="btn btn-rose btn-simple btn-wd btn-lg" type="submit" [disabled]="!registerForm.valid">注册</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <app-footer></app-footer>
  </div>
  <div class="full-page-background" style="background-image: url(../../assets/images/register.jpeg)"></div>
</div>
